<template>
	<view class="goodList">
		<view :class="[`itembox_${listStyle}`, 'scroll-Y']" v-if="listStyle == 1">
			<view :class="[`item_${listStyle}`,'item_active']" v-for="(item, i) in list" :key="i" @click="toNav(`goods/goodsDetail?id=${item.inventoryId}&title=${item.title}`)">
				<view class="imgbox image-warp">
					<!-- <image lazy-load :src="item.img" mode="aspectFill"></image> -->
					<u--image :src="item.img" lazyLoad width="186rpx" height="140rpx"></u--image>
					<image v-if="item.kucun === 0 && isShowKc" lazy-load class="showwan" src="@/static/images/shouwan.png" mode=""></image>
				</view>
				<view class="infobox">
					<text class="t1 line-1">{{ item.title }}</text>
					<!-- <text class="t2 line-1" >{{ item.remark }}</text> -->
					<view class="jg2">
						<!-- <text class="t2" style="color: #e54e4e">售价：{{ item.price_market }}</text> -->
						<text class="t2" style="color: #e54e4e">售价：{{ if_vip() ? item.price_user : item.price_sale }}</text>
						<!-- <text class="t2 line-1" v-else style="color: #e54e4e">￥{{ item.price_market }}</text> -->
						<text class="t2" style="color: #e54e4e" v-if="parseFloat(item.price_vip)">会员：{{ if_vip() ? item.price_vip : '?' }}</text>
						<text class="t2" style="color: #e54e4e" v-else>会员：{{ if_vip() ? '78.00' : '?' }}</text>
					</view>
				</view>
			</view>
		</view>

		<view :class="[`itembox_${listStyle}`]" v-if="listStyle == 2">
			<view class="headbox">
				<view class="lbox">
					<text>剩余时间：</text>
					<u-count-down @finish="finish" :time="djs" format="HH:mm:ss" @change="onChange">
						<text>{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}:{{ timeData.minutes }}:{{ timeData.seconds }}</text>
					</u-count-down>
				</view>
				<view class="rbox">
					<text>爆款好物限量抢</text>
				</view>
			</view>

			<view class="innerbox">
				<view class="scroll-Y">
					<view :class="[`item_${listStyle}`,'item_active']" v-for="(item, i) in list" :key="i" @click="toNav(`goods/goodsDetail?id=${item.inventoryId}&title=${item.title}`)">
						<view class="imgbox image-warp">
							<!-- <image lazy-load :src="item.img" mode="aspectFill"></image> -->
							<u--image :src="item.img" lazyLoad width="202rpx" height="202rpx"></u--image>
							<image v-if="item.kucun === 0 && isShowKc" lazy-load class="showwan" src="@/static/images/shouwan.png" mode=""></image>
						</view>
						<!-- v-if="item.if_refund" -->
						<view class="infobox">
							<text class="t1 line-1 sc">{{ item.price_market }}</text>
							<text class="t2 line-1">{{ item.price_sale }}</text>
						</view>
						<!-- 	<view class="infobox" v-else>
							<text class="t1 line-1">{{ item.price_market }}</text>
						</view> -->
					</view>

					<view v-if="list.length === 0" class="flex-center" style="text-align: center; flex: 1">
						<text></text>
					</view>
				</view>
			</view>
		</view>

		<view :class="[`itembox_${listStyle}`]" v-if="listStyle == 3">
			<view :class="[`item_${listStyle}`,'item_active']" v-for="(item, i) in list" :key="i" @click="toNav(`goods/goodsDetail?id=${item.inventoryId}&title=${item.title}`)">
				<view class="imgbox image-warp">
					<!-- <image lazy-load :src="item.img" mode=""></image> -->
					<u--image :src="item.img" lazyLoad width="334rpx" height="334rpx"></u--image>
					<image v-if="item.kucun === 0 && isShowKc" lazy-load class="showwan" src="@/static/images/shouwan.png" mode=""></image>
				</view>
				<view class="infobox">
					<text class="t1 line-1">{{ item.title }}</text>
					<text class="t2 line-1">{{ item.remark }}</text>
					<view class="jg">
						<!-- <text class="t3">售价：{{ item.price_market }}</text> -->
						<text class="t3">售价：{{ if_vip() ? item.price_user : item.price_sale }}</text>
						<text class="t3" v-if="parseFloat(item.price_vip)">会员：{{ if_vip() ? item.price_vip : '?' }}</text>
						<text class="t3" v-else>会员：{{ if_vip() ? '78.00' : '?' }}</text>
					</view>
				</view>
			</view>
		</view>

		<view :class="[`itembox_${listStyle}`]" v-if="listStyle == 4">
			<view :class="[`item_${listStyle}`,'item_active']" v-for="(item, i) in list" :key="i" @click="toNav(`goods/goodsDetail?id=${item.inventoryId}&title=${item.title}`)">
				<view class="imgbox image-warp">
					<!-- <image lazy-load :src="item.img" mode=""></image> -->
					<u--image :src="item.img" lazyLoad width="138rpx" height="138rpx"></u--image>
					<image v-if="item.kucun === 0 && isShowKc" lazy-load class="showwan" src="@/static/images/shouwan.png" mode=""></image>
				</view>
				<view class="infobox">
					<text class="t1 line-1">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<view :class="[`itembox_${listStyle}`]" v-if="listStyle == 5">
			<checkbox-group name="check">
				<label :class="[`item_${listStyle}`,'item_active']" v-for="(item, i) in list" :key="i" @click="handleLabel(item)">
					<view style="margin-right: 8rpx">
						<checkbox :disabled="item.kucun === 0 && !isedit" :checked="item.isCheck" :value="item.inventoryId.toString()" />
					</view>
					<view class="goods">
						<view class="image-warp">
							<!-- <image lazy-load :src="item.image" mode=""></image> -->
							<u--image :src="item.image" lazyLoad radius="16rpx" width="176rpx" height="176rpx"></u--image>
							<image v-if="item.kucun === 0" lazy-load class="showwan" src="@/static/images/shouwan.png" mode=""></image>
						</view>

						<view class="info" @click.stop="clickName(item)">
							<view class="row">
								<text class="line-2">{{ item.title }}</text>
							</view>
							<text class="line-1 key_vals">{{ item.key_vals }}</text>
							<view class="row2">
								<text v-if="item.if_refund">{{ item.price_sale }}</text>
								<text v-else>{{ item.price_market }}</text>
								<view class="setNum">
									<u-number-box v-model="item.num" :asyncChange="true" @change="valChange($event, item)"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'goodList',
	props: {
		listStyle: {
			type: Number | String,
			default: '1'
		},
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		},
		isedit: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		if_vip() {
			let localStorage = uni.getStorageSync('localStorage') || false;
			return (item) => {
				if (localStorage) {
					if (localStorage.hasOwnProperty('level')) {
						return localStorage.level === '会员用户';
					} else {
						return false;
					}
				}
			};
		},
		djs() {
			if (this.listStyle == 2) {
				if (this.list.length > 0) {
					return this.list[0].cuxiao_time * 1000;
				}
			} else {
				return 0;
			}
			return 0;
		}
	},
	data() {
		return {
			selectList: [],
			timeData: {},
			userinfo: {},
			isShowKc: false
		};
	},
	watch: {
		list: {
			deep: true,
			handler(val) {
				this.getSelect();
			}
		}
	},
	mounted() {},
	methods: {
		finish() {
			this.$emit('finish');
		},
		onChange(e) {
			this.timeData = e;
		},
		clickName(item) {
			this.$emit('clickName', item);
		},
		handleLabel(item) {
			if (item.kucun === 0 && !this.isedit) {
				this.msg('该商品库存不足');
				return;
			}
			item.isCheck = !item.isCheck;
		},
		getSelect() {
			let selectList = this.list.filter((item) => item.isCheck);
			this.$emit('getSelect', selectList);
		},
		valChange(e, item) {
			this.$emit('update', { e, item });
		}
	}
};
</script>

<style lang="less" scoped>
.jg2 {
	display: flex;
	flex-direction: column;
	text {
	}
}
.jg {
	width: 100%;
	.flex-between();
	text::before {
		display: none;
	}
	text {
		display: flex;
		white-space: nowrap;
	}
	text:nth-of-type(2) {
		text-align: right;
	}
}
.item_active{
	// &:visited {
	//   color: purple;  /* 设置已访问链接的颜色为紫色 */
	//   .bor();
	// }
}
.goodList {
	.image-warp {
		position: relative;
		overflow: hidden;
	}
	.showwan {
		.fix-c();
		z-index: 10;
		background: transparent !important;
		background-color: transparent !important;
		
	}
	.scroll-Y {
		display: flex;
		overflow: auto hidden;
		scroll-behavior: smooth; /* 平滑滚动 */
		scroll-snap-type: x mandatory;
		transition: transform 0.5s ease; /* 过渡效果 */
	}
	.itembox_5 {
		.item_5 + .item_5 {
			margin-top: 16rpx;
		}
		.item_5 {
		
			display: flex;
			align-items: center;
			height: 240rpx;
			padding: 0 24rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.goods {
				flex: 1;
				display: flex;
				image {
					width: 176rpx;
					height: 176rpx;
					background: #f8f8f8;
					flex-shrink: 0;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
				.info {
					flex: 1;
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.row {
						text {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #101010;
						}
					}
					.key_vals {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.row2 {
						.flex-between();
						& > text {
							flex: 1;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #e54e4e;
							&:before {
								content: '￥';
								font-size: 20rpx;
							}
						}
						.setNum {
						}
					}
				}
			}
		}
	}

	.itembox_4 {
		display: flex;
		flex-wrap: wrap;
		padding: 24rpx 14rpx;
		.item_4 {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 33.33%;
			margin-bottom: 26rpx;
			.imgbox {
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				image {
					width: 138rpx;
					height: 138rpx;
					background: #f5f5f5;
					flex-shrink: 0;
				}
			}
			.infobox {
				flex: 1;
				width: 100%;
				text-align: center;
				margin-top: 8rpx;
				text {
					font-size: 20rpx;
					font-family: PingFangSC-Regular-, PingFangSC-Regular;
					font-weight: normal;
					color: #141414;
				}
			}
		}
		.item_4:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	.itembox_3 {
		display: flex;
		flex-wrap: wrap;
		.item_3 {
			display: flex;
			flex-direction: column;
			width: 334rpx;
			height: 450rpx;
			height: 460rpx;
			margin-right: 18rpx;
			margin-bottom: 16rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			.j-active();
			.imgbox {
				flex-shrink: 0;
				width: 334rpx;
				height: 250rpx;
				height: 334rpx;
				image {
					flex-shrink: 0;
					width: 334rpx;
					height: 250rpx;
					height: 334rpx;
					background: #fcfcfc;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					flex-shrink: 0;
				}
			}
			.infobox {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				padding: 18rpx 24rpx;
				.t1 {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.t2 {
					// flex: 1;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #141414;
					line-height: 30rpx !important;
				}
				.t3 {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #e54e4e;
				}
			}
		}
		.item_3:nth-of-type(2n) {
			margin-right: 0;
		}
	}

	.itembox_2 {
		position: relative;
		background: #e54e4e;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.headbox {
			.flex-between();
			height: 66rpx;
			width: 100%;
			padding: 0 24rpx;
			background: #e54e4e;
			border-radius: 16rpx 16rpx 0rpx 0rpx;

			.lbox {
				display: flex;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
			.rbox {
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
		.innerbox {
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 24rpx;
		}
		.item_2 + .item_2 {
			margin-left: 16rpx;
		}
		.item_2 {
			.flex-center-y();
			scroll-snap-align: start;
			flex-shrink: 0;
			width: 202rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.j-active();
			.imgbox {
				width: 202rpx;
				height: 202rpx;
				flex-shrink: 0;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				image {
					width: 202rpx;
					height: 202rpx;
					background: #f8f8f8;
					flex-shrink: 0;
				}
			}
			.infobox {
				width: 202rpx;
				.flex-between();
				margin-top: 4rpx;
				.sc {
					text-decoration: line-through;
				}
				.t1 {
					flex: 1;
					text-align: left;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					white-space: nowrap;
					&:before {
						content: '￥';
					}
				}
				.t2 {
					flex: 1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					white-space: nowrap;
					color: #e54e4e;
					&:before {
						content: '￥';
					}
				}
			}
		}
	}
	.itembox_1 {
		.item_1 + .item_1 {
			margin-left: 16rpx;
		}
		.item_1 {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			width: 218rpx;
			height: 264rpx;
			height: 270rpx;
			padding: 16rpx 16rpx 10rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			scroll-snap-align: start;
			.j-active();
			.imgbox {
				flex-shrink: 0;
				width: 186rpx;
				height: 140rpx;
				image {
					width: 186rpx;
					height: 140rpx;
					background: #f8f8f8;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}
			.infobox {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-top: 4rpx;
				.t1 {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.t2 {
					height: 30rpx;
					margin-top: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #141414;
				}
			}
		}
	}
}
</style>
